import { View, Image, Text } from '@tarojs/components';
import { AtTag } from 'taro-ui';
import './index.scss';

const tagList = [
  {
    name: '就医陪诊',
    color: '#F1C247',
    id: 1,
  },
  {
    name: '个人洗护',
    color: '#EE687D',
    id: 2,
  },
  {
    name: '儿童推拿',
    color: '#72D0A0',
    id: 3,
  },
  {
    name: '营养三餐',
    color: '#87C8E9',
    id: 4,
  },
  {
    name: '室内卫生',
    color: '#F1C247',
    id: 5,
  },
  {
    name: '出门陪同',
    color: '#F480EB',
    id: 6,
  },
  {
    name: '出门陪同',
    color: '#EE687D',
    id: 6,
  },
];

export default function ({ serviceCate, onHandle = () => {}, index }) {
  console.log('appp', serviceCate, index);
  const getTag = () => {
    console.log(tagList[index]);
    return tagList[index] || {};
  };
  return (
    <View className="serviceCate-item" onClick={onHandle}>
      <View className="serviceCate-info">
        <View className="serviceCate-image">
          <View className="serviceCate-tag" style={{ backgroundColor: getTag().color }}>
            {serviceCate.name}
          </View>
          <Image src={serviceCate.icon_url} />
        </View>
        <View className="serviceCate-right">
          <View className="serviceCate-name">{serviceCate.name}</View>
          <View className="serviceCate-address">{serviceCate.desc}</View>
          {/* <View className="serviceCate-status">
            <Text>{serviceCate.duration}</Text>
          </View> */}
          <View className="tag-container">
            {serviceCate.keywords &&
              Array.isArray(serviceCate.keywords) &&
              serviceCate.keywords.map((item, key) => {
                return (
                  <AtTag size="small" key={key}>
                    {item}
                  </AtTag>
                );
              })}
          </View>
          <View className="serviceCate-bottom">
            <Text className="price-text">￥{serviceCate.min_price}</Text>
            <Text className="price-currency">元起</Text>
            <Text className="sales">{serviceCate.sales}人已购买</Text>
          </View>
        </View>
      </View>
    </View>
  );
}
